<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h2>{{school}}</h2>
    <h2>{{address}}</h2>
    <button @click="show1(school)">学校名称</button>
    <button @click="show2(2)">学校电话+楼层</button>
    <button @click="show3(3,10)">学校电话+楼层+校龄</button>
    <button @click="show4(3,10,$event)">学校电话+楼层+校龄</button>
  </div>
</body>

<script type="text/javascript">
  var vm = new Vue({
    el: '#demo',
    data: {
      school: '尚硅谷',
      address: '北京',
      tel: '10086',
      floor: 3,
      age: 10
    },
    methods: {
      show() {
        alert(this.address)
      },
      show1(name) {
        alert(name);
      },
      show2(age) {
        alert(`电话:${this.tel},所在楼层${this.floor},校龄${age}`);
      },
      show3(floor, age) {
        alert(`电话:${this.tel},所在楼层${floor},校龄${age}`);
      },
      show4(floor, age, event) {
        console.log(event);
        alert(`电话:${this.tel},所在楼层${floor},校龄${age}`);
      },
    }
  })

</script>

</html>